<template>
  <el-card>
    <div slot="header">
      <el-steps :active="activeStep" simple>
        <el-step
          v-for="(step, index) in steps"
          :key="index"
          :title="step.title"
          :icon="step.icon"
          @click.native="activeStep = index"
        >
        </el-step>
      </el-steps>
    </div>
    <el-form label-position="right" label-width="80px">
      <div v-show="activeStep === 0">
        <el-form-item label="课程名称">
          <el-input />
        </el-form-item>
        <el-form-item label="课程简介">
          <el-input />
        </el-form-item>
        <el-form-item label="课程描述">
          <el-input />
        </el-form-item>
        <el-form-item label="讲师名称">
          <el-input />
        </el-form-item>
        <el-form-item label="讲师简介">
          <el-input />
        </el-form-item>
        <el-form-item label="课程排序">
          <el-input-number label="数字控制排序，数字越大越靠后" />
        </el-form-item>
      </div>
      <div v-show="activeStep === 1">
        <el-form-item label="课程封面">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="解锁封面">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </div>
      <div v-show="activeStep === 2">
        <el-form-item label="售卖价格">
          <el-input>
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品原价">
          <el-input>
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="销量">
          <el-input>
            <template slot="append">单</template>
          </el-input>
        </el-form-item>
        <el-form-item label="活动标签">
          <el-input>
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </div>
      <div v-show="activeStep === 3">
        <el-form-item label="限时秒杀开关">
          <el-switch
            v-model="isSecKill"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
            >
          </el-switch>
        </el-form-item>
        <template v-if="isSecKill">
          <el-form-item label="开始时间">
            <el-date-picker type="datetime"> </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker type="datetime"> </el-date-picker>
          </el-form-item>
          <el-form-item label="秒杀价">
            <el-input>
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="秒杀库存">
            <el-input>
              <template slot="append">个</template>
            </el-input>
          </el-form-item>
        </template>
      </div>
      <div v-show="activeStep === 4">
          <el-form-item label="课程详情">
            <el-input type="textarea"> </el-input>
          </el-form-item>
      </div>
      <el-form-item v-if="activeStep >= 0 && activeStep < 4">
        <el-button @click="activeStep++">下一步</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'CreateCourse',
  data () {
    return {
      activeStep: 0,
      steps: [
        { title: '基本信息', icon: 'el-icon-edit' },
        { title: '课程封面', icon: 'el-icon-upload' },
        { title: '销售信息', icon: 'el-icon-edit' },
        { title: '秒杀活动', icon: 'el-icon-upload' },
        { title: '课程详情', icon: 'el-icon-upload' }
      ],
      isSecKill: false
    }
  },
  methods: {
    handleAvatarSuccess () {
      console.log('avartar')
    },
    beforeAvatarUpload () {
      console.log('avartar')
    }
  }
})
</script>

<style lang="scss" scoped>
.el-steps {
  cursor: pointer;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
